<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta name="format-detection" content="telephone=no">
	<meta content="telephone=no" name="format-detection">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<link rel="stylesheet" media="screen and (max-width:900px)" href="/assets/stylesheets/style_wap.css" type="text/css" />
	<link rel="stylesheet" media="screen and (min-width:900px)" href="/assets/stylesheets/style_pc.css" type="text/css" />
	<title>银行卡管理</title>
</head>
<body>
	<!-- 前端嵌套写法，仅供前端使用，首页有完整代码 -->
	<div class="topline" id="J_topline" data-til="银行卡管理">
		<nav th:replace="hjh/include::menuV"></nav>
	</div>

	<div class="backcard content">
		<p class="btil">我的银行卡<span class="btilt">您已添加<span class="btilc" th:text="${total}"></span>张银行卡</span></p>
		<div class="list clearfix">

			<div class="item" th:each="bank:${list}">
				<p class="item_til" th:text="${bank.bankName}"></p>
				<p class="item_name" th:text="${'持卡人姓名：' + bank.cardUserName}"></p>
				<p class="item_name" th:text="${'卡号：' + bank.cardNumber}"></p>
				<p class="item_do">
					<a href="javascript:;" th:attr="data-cid=${bank.id}" class="J_item_edit item_dos"><img src="/assets/images/icon_edit.png" class="item_ico">编辑</a>
					<a href="javascript:;" th:attr="data-cid=${bank.id}" class="J_item_del item_dos"><img src="/assets/images/icon_del.png" class="item_ico">删除</a>
				</p>
			</div>
			<a href="javascript:;" class="addcard alic" id="J_addcard">
				<img src="/assets/images/icon_new_card.png" class="addcard_i">
				<p class="addcard_t">新增银行卡</p>
			</a>
		</div>
	</div>
	<nav th:replace="hjh/include::bottomV"></nav>

	<!-- 银行卡弹层 -->
	<div class="pop" id="J_pop_card">
		<div class="pop_model">
			<div class="pop_model_til">新增银行卡<a href="javascript:;" data-target="#J_pop_card" class="J_pop_model_close pop_model_close"></a></div>
			<div class="formline">
				<input type="hidden" id="J_cardId">
				<div class="fline"><p class="ado">持卡人姓名：</p><input class="J_ctrol ctrol" data-target="cardUserName" type="text" placeholder="" name="" id="J_name"></div>
				<div class="fline"><p class="ado">开户银行：</p>
					<select class="J_select ctrol ctrol_select" id="J_bankName" data-target="bankName">
						<option value="">请选择银行</option>
						<option value="中国工商银行">中国工商银行</option>
						<option value="招商银行">招商银行</option>
						<option value="中国农业银行">中国农业银行</option>
						<option value="中国建设银行">中国建设银行</option>
						<option value="中国银行">中国银行</option>
						<option value="中国民生银行">中国民生银行</option>
						<option value="中国光大银行">中国光大银行</option>
						<option value="中信银行">中信银行</option>
						<option value="交通银行">交通银行</option>
						<option value="兴业银行">兴业银行</option>
						<option value="上海浦东发展银行">上海浦东发展银行</option>
						<option value="中国人民银行">中国人民银行</option>
						<option value="华夏银行">华夏银行</option>
						<option value="深圳发展银行">深圳发展银行</option>
						<option value="广东发展银行">广东发展银行</option>
					</select>
				</div>
				<div class="fline"><p class="ado">银行卡号：</p><input class="J_ctrol ctrol" data-target="cardNumber" type="text" placeholder="" name="" id="J_number"></div>
				<div class="fline flinebtn"><a href="javascript:;" class="btn fbtm" id="J_btn">保存</a></div>
			</div>
		</div>
	</div>

	<script language="javascript" type="text/javascript" src="/assets/javascript/jquery-2.1.4.min.js"></script>
	<script language="javascript" type="text/javascript" src="/assets/javascript/func.js"></script>
	<script type="text/javascript">
		$(function(){
			$('.J_ctrol').blur(function(){
				var self = $(this),
					val = self.val().trim(),
					type = self.attr('data-type')||'text',
					tar = self.attr('data-target');

				if(val){
					self.val(val);
					data[tar] = val; // 数据填充
				};
			});
			console.log(data);
			$('.J_select').change(function(){
				var self = $(this),
					val = self.val(),
					tar = self.attr('data-target');
				if(val){
					self.val(val);
					data[tar] = val; // 数据填充
				};
			});

			//基础信息
			var J_btn = $('#J_btn'),
				isajax = false, // 设置开关
				data = {"bank":1};
			J_btn.click(function(){
				data["id"] = $("#J_cardId").val();
				data["cardUserName"] = $("#J_name").val();
				data["cardNumber"] = $("#J_number").val();
				data["bankName"] = $("#J_bankName").val();
				console.log("提交数据");
				console.log(data);
				if(isajax){return false;}
				if(!data.cardUserName){
					errormsg($('#J_name'),'请输入持卡人姓名');
					return;
				};
				if(!data.bankName){
					errormsg($('#J_bankName'),'请选择银行');
					return;
				};
				if(!data.cardNumber){
					errormsg($('#J_number'),'请输入银行卡号');
					return;
				};
				//ajax提交数据
				//alert('提交的数据：'+JSON.stringify(data));
				isajax = true;
				J_btn.html("正在提交···");
				console.log(data);
				$.ajax({
					type: "POST",
					url: "/bankcard_add?v="+(new Date().getTime()),
					data: data,
					dataType: "json",
					success: function(res){
						if(res.code==0){
							// 提交成功
							alert('提交成功');
							window.location.href = window.location.href;
						}else{
							if(res.code==101){
								errormsg($('#J_name'),res.msg);
							}
						};
					},
					complete:function(){
						isajax = false;
					}
				});
			});

			// 弹框显示
			$('.J_item_edit').click(function(){
				var self = $(this),
					cid = self.attr('data-cid'),
					tar = $('#J_pop_card');
				$.ajax({
					type: "GET",
					url: "/bankcard_get?v="+(new Date().getTime()),
					data: {id:cid},
					dataType: "json",
					success: function(res){
						$("#J_name").val(res.cardUserName);
						$("#J_number").val(res.cardNumber);
						$("#J_bankName").val(res.bankName);
						$("#J_cardId").val(res.id);
					},
					complete:function(){
						isajax = false;
					}
				});
				tar.show();
				setTimeout(function(){
					tar.addClass('pop_active')
				},10);
			});

			$('.J_pop_model_close').click(function(){
				console.log($(this).attr('data-target'))
				$($(this).attr('data-target')).hide().removeClass('pop_active');
			});

			$('#J_addcard').click(function(){
				var tar = $('#J_pop_card');
				tar.show();
				setTimeout(function(){
					tar.addClass('pop_active')
				},10);
			});

			$('.J_item_del').click(function(){
				var self = $(this),
				cid = self.attr('data-cid');
				var mm = confirm("是否删除该银行卡？");
				if(mm){
					//ajax提交数据
					isajax = true;
					$.ajax({
						type: "GET",
						url: "/bankcard_delete?v="+(new Date().getTime()),
						data: {id:cid},
						dataType: "json",
						success: function(res){
							if(res.code==0){
								// 提交成功
								alert('删除成功');
								window.location.href = window.location.href; // 刷新
							}else{
								alert('删除失败');
							};
						},
						complete:function(){
							isajax = false;
						}
					});
				}

			});
		});
	</script>
</body>
</html>
